import React, { memo,useEffect,useRef,useCallback ,useState} from 'react';
import { useDispatch ,useSelector,shallowEqual} from 'react-redux';
import { getTopBannerAction } from '../../store/actionCreators';

import { Carousel } from 'antd';
import {
	BannerWrapper,
	BannerLeft,
	BannerRight,
	BannerControl
} from './style';

export default memo(function YTopBanner() {
	const [currentIndex,setCurrentIndex] = useState(0);
	    // 组件 和redux 关联 就是要做两件事 1 获取数据 2 进行操作

    // useDispatch useSelector是redux提供的Hook
        // :2: 也就是说 redux 用useSelector 这个Hook 把
        // shallowEqual 是把组件进行浅层的比较
        const {topBanners} = useSelector(state => ({
            // 这里的state 就是组件里的state
            //  这里会有个返回值 这个返回值 会返回给 recommend里面
            // 也就是说 这里返回的一个对象 会给recommmend
            // topBanners:state.recommend.topBanners
            // 最后的数据结构优化里 因为引入了 immutable对象 取 redux里的数据 就不能直接用 state.recommend.topBanners 这种方式去取值了
            //  要用get 方法
            topBanners:state.recommend.get('topBanners')
            // 这里可以是多个数据 上面用的是对象的解构就可以看出 他会根据不同的数据解构出不同的变量

        }),shallowEqual)
        // ：1：也就是说 redux 通过useDispatch这个hook 把 事件触发的方法暴露出来 
        // 让使用者去调用 去传入一些异步操作
		const dispatch = useDispatch();
		// 其他的Hooks
		const bannerRef = useRef();

        // 这里就是发送请求
        useEffect(() => {
            dispatch(getTopBannerAction());
		}, [dispatch]);
	// 添加回调方法
	// 当我们把一个函数 当成一个参数 传个组件的时候 一定要用useCallback 
// useCallback 会给当前的函数 一个缓存（记忆） 
// 这样的话 bannerChange这个函数就是有记忆的 他永远指向的是他同一个引用 
// 因为 Carousel 这个组件
	const bannerChange = useCallback(
			(from,to)=>{
				// 每次发送图片切换的时候 把to传给 setCurrentIndex 这样在当前的 currentIndex 里取到最新的值
				//  currentIndex 里一直保持的是轮播图当前的第几张图片
				setCurrentIndex(to)
			},[]);
// 其他业务代码 
		const bgImaage = topBanners[currentIndex] && (topBanners[currentIndex].imageUrl+ "?imageView&blur=40x20");

	return (
		// 注意 给组件BannerWrapper添加 bgImage 属性 这个属性 在props里是可以取到的
		// 就相当于父组件 给子组件传值 值都在子组件的props里存着
		<BannerWrapper bgImage = {bgImaage}>
			<div className="banner wrap-v2">
				<BannerLeft>
					<Carousel effect="fade" autoplay="true" ref={bannerRef} beforeChange={bannerChange}>
						{topBanners.map((item,index)=>{
							return (
								<div className="banner-item" key={item.targetId}>
									<img className="image" src={item.imageUrl} alt={item.typeTitle}/>
								</div>
							)
						})}
					</Carousel>	
				</BannerLeft>	
				<BannerRight></BannerRight>
				<BannerControl>
					<button className="btn left" onClick={(e)=>{bannerRef.current.prev()}}></button>
					<button className="btn right" onClick={(e)=>{bannerRef.current.next()}}></button>
				</BannerControl>
			</div>
		</BannerWrapper>
	) 
})
